<template>
  <div>
    <el-row type="flex" justify="space-between" align="middle">
      <span style="color: pink; font-size: 12px">说明：目前支持学科和关键字条件筛选
      </span>
      <el-button type="success" icon="el-icon-edit" size="small" @click="$router.push('/questions/new')">新增试题
      </el-button>
    </el-row>
    <el-form ref="searchFormRef" :model="searchForm" label-width="80px" style="margin-top: 15px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科">
            <el-select v-model="searchForm.subjectID" placeholder="请选择" @focus="getSubjectList"
              @change="getCatalog($event)">
              <el-option v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="试题类型">
            <el-select placeholder="请选择" v-model="searchForm.questionType">
              <el-option v-for="item in questionType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="题目备注">
            <el-input v-model="searchForm.remarks" placeholder="题目备注搜索"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select placeholder="请选择" v-model="searchForm.catalogID">
              <el-option v-for="item in catalogList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="难度">
            <el-select placeholder="请选择" v-model="searchForm.difficulty">
              <el-option v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="企业简称">
            <el-input v-model="searchForm.shortName" placeholder="请输入企业简称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select v-model="searchForm.tags" placeholder="请选择">
              <el-option v-for="item in tagList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="方向">
            <el-select placeholder="请选择" v-model="searchForm.direction">
              <el-option v-for="(item, index) in direction" :key="index" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="城市">
            <el-select placeholder="请选择" v-model="searchForm.province" @change="getCity($event)"
              style="width: 48%; float: left">
              <el-option v-for="(item, index) in provinces" :key="index" :label="item" :value="item" />
            </el-select>
            <el-select placeholder="请选择" v-model="searchForm.city" style="width: 48%; float: right">
              <el-option v-for="(item, index) in citys" :key="index" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input v-model="searchForm.keyword" placeholder="根据题干搜索"></el-input>
          </el-form-item>
          <el-form-item label="录入人">
            <el-select v-model="searchForm.creatorID" placeholder="请选择" @focus="getUserList">
              <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item style="float: right">
            <el-button size="small" @click="clear">清除</el-button>
            <el-button type="primary" size="small" @click="search">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { simple } from '../../api/hmmm/subjects'
import { simple as userSimple } from '../../api/base/users'
import { simple as tagsSimple } from '../../api/hmmm/tags'
import { simple as directorysSimple } from '../../api/hmmm/directorys'
import { questionType, difficulty, direction } from '../../api/hmmm/constants'
import { provinces, citys } from '../../api/hmmm/citys'

export default {
  name: '',
  data () {
    return {
      searchForm: {
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: ''
      },
      // 学科数据列表
      subjectList: [],
      // 二级目录列表
      catalogList: [],
      // 负责人数据列表
      userList: [],
      // 标签数据列表
      tagList: [],
      // 试题类型枚举
      questionType,
      // 难度枚举
      difficulty,
      // 方向枚举
      direction,
      // 城市
      provinces: provinces(),
      // 地区
      citys: []
    }
  },
  created () { },
  mounted () { },
  methods: {
    // 获取简单学科列表
    async getSubjectList () {
      const { data: res } = await simple()
      console.log(res)
      this.subjectList = res
    },
    // 获取简单负责人列表
    async getUserList () {
      const { data: res } = await userSimple()
      console.log(res)
      this.userList = res
    },
    // 表单重置
    clear () {
      this.$refs.searchFormRef.resetFields()
      // 清空表单
      this.searchForm = {
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: ''
      }
      this.catalogList = []
      this.citys = []
      this.$emit('clear')
    },
    // 监听城市选择框的 change 事件，拿到其选中的城市得到地区数组
    getCity (prov) {
      this.citys = citys(prov)
      this.searchForm.city = ''
      console.log(citys(prov))
    },
    // 根据 id 获取二级目录（简单标签接口）
    async getCatalog (sub) {
      const { data: res1 } = await directorysSimple({ subjectID: sub })
      const { data: res2 } = await tagsSimple({ subjectID: sub })
      this.catalogList = res1
      this.tagList = res2
    },
    // 搜索功能
    search () {
      this.$emit('search', this.searchForm)
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {},
  props: {}
}
</script>

<style lang='less' scoped>
.el-select {
  width: 100%;
}
</style>
